<template>
  <div id="app">
    <!-- <h3>租户分布图</h3> -->
    <span v-show="false">{{markers}}</span>
    <div class="amap-page-container">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" :expandZoomRange="tw" class="amap-demo">
        <el-amap-marker
          vid="component-marker"
          :position="componentMarker.position"
          :content-render="componentMarker.contentRender"
        ></el-amap-marker>
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker.position"
          :events="marker.events"
          :visible="marker.visible"
          :draggable="marker.draggable"
          :vid="index"
          @click="displayInformation"
        ></el-amap-marker>
      </el-amap>
      <!-- <div class="toolbar">
        <button type="button" name="button" v-on:click="toggleVisible">toggle first marker</button>
        <button type="button" name="button" v-on:click="changePosition">change position</button>
        <button type="button" name="button" v-on:click="chnageDraggle">change draggle</button>
        <button type="button" name="button" v-on:click="addMarker">add marker</button>
        <button type="button" name="button" v-on:click="removeMarker">remove marker</button>
      </div>-->
      <div class="detailedInformation" v-show="particularsSwi">
        <div class="tops">
          <div class="tltles">{{showOnly['name']}}</div>
          <div class="close">
            <img class="closeimg" src="./imges/close-img.png" alt @click="particularsSwi=false" />
          </div>
        </div>
        <div class="main-inner">
          <div class="list" v-if="showOnly['phone']">
            <div class="left">电话</div>
            <div class="right">{{showOnly['phone']}}</div>
          </div>
          <div class="list" v-if="showOnly['location']">
            <div class="left">地址</div>
            <div class="right">{{showOnly['location']}}</div>
          </div>
          <div class="list" v-if="showOnly['longitude']">
            <div class="left">经度</div>
            <div class="right">{{showOnly['longitude']}}</div>
          </div>
          <div class="list" v-if="showOnly['latitude']">
            <div class="left">纬度</div>
            <div class="right">{{showOnly['latitude']}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const exampleComponents = {
  // props: ["text"],
  // template: `<div>text from  parent: {{text}}</div>`
};
module.exports = {
  name: "amap-page",
  props: ["PlatformMonitoringData", "baseTenantIn"],
  data() {
    return {
      particularsSwi: false,
      showOnly: {},
      tw: true,
      count: 1,
      slotStyle: {
        padding: "2px 8px",
        background: "#eee",
        color: "#333",
        border: "1px solid #aaa"
      },
      zoom: 4, //地图放大倍数
      center: [121.5273285, 31.21515044],
      markers: [
        //定位一
        // {
        //   position: [116, 39],
        // },
        //定位2
        // {
        //   position: [121, 31],
        //   events: {
        //     click: () => {
        //       alert("click marker");
        //     },
        //     dragend: e => {
        //       console.log("---event---: dragend");
        //       this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
        //     }
        //   },
        //   visible: true,
        //   draggable: false,
        //   template: "<span>1</span>"
        // },
      ],
      renderMarker: {
        position: [121.5273285, 31.21715058],
        contentRender: (h, instance) => {
          // if use jsx you can write in this
          // return <div style={{background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'}} onClick={() => ...}>marker inner text</div>
          return h(
            "div",
            {
              style: {
                background: "#80cbc4",
                whiteSpace: "nowrap",
                border: "solid #ddd 1px",
                color: "#f00"
              },
              on: {
                click: () => {
                  const position = this.renderMarker.position;
                  this.renderMarker.position = [
                    position[0] + 0.002,
                    position[1] - 0.002
                  ];
                }
              }
            },
            ["marker inner text"]
          );
        }
      },
      componentMarker: {
        position: [121.5273285, 31.21315058],
        contentRender: (h, instance) =>
          h(
            exampleComponents,
            {
              style: { backgroundColor: "#fff" },
              props: { text: "father is here" }
            },
            ["xxxxxxx"]
          )
      },
      slotMarker: {
        position: [121.5073285, 31.21715058]
      }
    };
  },
  watch: {
    PlatformMonitoringData: {
      handler(newVal, oldVal) {
        // this.PlatformMonitoringDataClone=JSON.parse(JSON.stringify(this.PlatformMonitoringData))
      },
      deep: true,
      immediate: true //深度监听数组
    },
    baseTenantIn: {
      deep: true,
      handler(newVal, oldVal) {
        // console.log("__________1++++2_______");
        // console.log(newVal);
        this.markers = [];
        for (let i = 0; i < newVal.length; i++) {
          let obj = {
            position: [],
            events: {
              click: () => {
                this.particularsSwi = true;
                console.log(this.particularsSwi);
                console.log("JJJJJJJJJJJJJJJJJJJJ");
                console.log(newVal[i]);
                this.showOnly = newVal[i];
              }
            }
          };
          obj.position[0] = newVal[i].longitude;
          obj.position[1] = newVal[i].latitude;

          this.markers.push(obj);
        }
      }
    }
  },
  created() {
    this.markers = [];
    for (let i = 0; i < this.baseTenantIn.length; i++) {
      let obj = {
        position: [],
        events: {
          click: () => {
            // alert('click marker');
            this.particularsSwi = true;
            console.log(this.particularsSwi);
            console.log("JJJJJJJJJJJJJJJJJJJJ");
            console.log(this.baseTenantIn[i]);
            this.showOnly = this.baseTenantIn[i];
          }
        }
      };
      obj.position[0] = this.baseTenantIn[i].longitude;
      obj.position[1] = this.baseTenantIn[i].latitude;

      this.markers.push(obj);
    }
  },
  // mounted() {
  //   for (let i = 0; i < this.baseTenantIn.length; i++) {
  //     let obj = {
  //       position: [],
  //     };
  //     obj.position[0] = this.baseTenantIn[i].longitude;
  //     obj.position[1] = this.baseTenantIn[i].latitude;
  //     this.markers.push(obj);
  //   }
  // },
  methods: {
    onClick() {
      this.count += 1;
    },
    displayInformation() {
      console.log("1213");
    }
  }
};
</script>
 <style lang="scss" scoped>
#app {
  width: 100%;
  height: 100%;

  .amap-page-container,
  .amap-demo {
    width: 100%;
    height: 100%;
  }
  // .amap-page-container {
  //   overflow: hidden;
  // }
}
.detailedInformation {
  position: absolute;
  width: 35%;
  // height: 200px;
  background: #ffffff;
  top: 47px;
  right: 10px;
  // padding: 5px;
  z-index: 10;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  // padding-top: 10px;
  padding-bottom: 15px;
  .tops {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 5px;
    background: #259ec0;
    color: #ffffff;
    
    .tltles {
      flex: 100;
      overflow: hidden; //隐藏
      text-overflow: ellipsis; //省略
      white-space: nowrap; //不换行
    }
    .close {
      width: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .closeimg {
        width: 14px;
        height: 14px;
        cursor: pointer;
      }
    }
  }
.main-inner{
  display: flex;
  flex-direction:column ;
  .list{
    height: 20px;
    display: flex;
    align-items: center;
    font-size: 12px;
    .left{
      width: 50px;
      margin: 0 5px;
      color: #259ec0;
    }
    .right{
      flex: 100;
      overflow: hidden; //隐藏
      text-overflow: ellipsis; //省略
      white-space: nowrap; //不换行
      color: #666;
    }
  }
}
}
</style>